import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { Button, Divider, Popconfirm, message } from 'antd';
import { useRef,useState } from 'react';

import { queryList, add,  PersonSalaryParams, PersonSalaryItem } from '@/services/person/salary';
import PersonSalaryForm from './salaryForm';

export default () => {
    const [open, setOpen] = useState<boolean>(false);
    const [personSalaryItem, setPersonSalaryForm] = useState<Partial<PersonSalaryItem> | undefined>();
    const actionRef = useRef<ActionType>();

    /**
     * 添加编辑工资
     * @param fields
    */
    const handleSubmit = async (fields: PersonSalaryItem) => {
        setOpen(false);
        const msg = '添加';
        message.loading('正在' + msg + '工资');
        const res = await add({ ...fields });

        if (res.success) {
            message.success(msg + '工资成功');
            if (actionRef.current) {
                actionRef.current.reload();
            }
        } else {
            message.error(res.msg);
        }
    };

    const showAddModal = () => {
        setOpen(true);
        setPersonSalaryForm({});
    };

    const columns: ProColumns<PersonSalaryItem>[] = [
        {
            title: '日期',
            dataIndex: 'salaryDate',
            hideInSearch: true,
            width: 90
        },
        {
            title: '日期',
            dataIndex: 'salaryDate',
            valueType: 'dateRange',
            hideInTable: true,
            search: {
                transform: (value: any) => ({
                    startDate: value[0],
                    endDate: value[1],
                }),
            },
          },
        {
            title: '归属',
            dataIndex: 'salaryMonth',
            width: 80
        },
        {
            title: '基本',
            dataIndex: 'baseIn',
            hideInSearch: true,
            valueType: 'money'
        },
        {
            title: '节日',
            dataIndex: 'festivalFee',
            hideInSearch: true,
            valueType: 'money'
        },
        {
            title: '福利',
            dataIndex: 'welfare',
            hideInSearch: true,
            valueType: 'money'
        },
        {
            title: '其他',
            dataIndex: 'otherIn',
            hideInSearch: true,
            valueType: 'money'
        },
        {
            title: '税前',
            dataIndex: 'beforeTax',
            hideInSearch: true,
            valueType: 'money'
        },
        {
            title: '公积金',
            dataIndex: 'accumulationFund',
            hideInSearch: true,
            valueType: 'money'
        },
        {
            title: '社保',
            dataIndex: 'socialSecurity',
            hideInSearch: true,
            valueType: 'money'
        },
        {
            title: '扣除',
            dataIndex: 'otherOut',
            hideInSearch: true,
            valueType: 'money'
        },
        {
            title: '个税',
            dataIndex: 'tax',
            hideInSearch: true,
            valueType: 'money'
        },
        {
            title: '税后',
            dataIndex: 'afterTax',
            hideInSearch: true,
            valueType: 'money'
        }
    ];

    return (
        <PageContainer title={false}>
            <ProTable<PersonSalaryItem>
                rowKey="id"
                actionRef={actionRef}
                columns={columns}
                request={(params) => {
                    params.keyword
                    return queryList(params as PersonSalaryParams);
                }}
                toolBarRender={() => [
                    <Button icon={<PlusOutlined />}
                        onClick={() => {
                            showAddModal();
                        }}
                        title="添加工资"
                        type="primary">
                    </Button>
                ]}
                pagination={{
                    pageSize: 10
                }}    
            />
            <PersonSalaryForm
                personSalaryItem={personSalaryItem}
                open={open}
                onCancel={() => setOpen(false)}
                onSubmit={handleSubmit}
            />
        </PageContainer>
    );
};